<template>
  <div class="container">
    <el-container>
      <el-header style="height: 10vh">
        <div class="common-div-card header-serch">
          <el-form :inline="true" :model="searchForm" class="header-form">
            <el-form-item label="原料卷号">
              <el-input v-model="searchForm.coldCoilId" placeholder="请输入原料卷号" clearable />
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="重量不符标识">
              <el-select v-model="searchForm.wtMisMatchFlag" placeholder="重量不符标识" clearable style="width: 160px">
                <el-option label="正常" value="0" />
                <el-option label="不符" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <el-col>
          <el-row>
            <div style="width: 100%" class="common-div-card table">
              <el-table
                :data="tableData"
                border
                :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                :stripe="true"
                v-loading="tableLoading"
                :show-overflow-tooltip="true"
                ref="tableRef"
              >
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="entId" label="原料卷号" width="180" />
                <el-table-column prop="entWeight" label="入口材料重量[t]" />
                <el-table-column prop="orderWeight" label="订单重量[t]" />
                <el-table-column prop="steelGrade" label="钢种" />
                <el-table-column prop="entWidth" label="入口材料宽度[mm]" />
                <el-table-column prop="entThick" label="入口材料厚度[mm]" />
                <el-table-column prop="entLength" label="入口材料长度[m]" />
                <el-table-column prop="historicalYield" label="历史成材率" />
                <el-table-column prop="historicalZinc" label="历史锌层重量" />
                <el-table-column prop="wtMisMatchFlag" label="重量不符标识" />
                <el-table-column prop="remark" label="备注" />
              </el-table>
            </div>
          </el-row>
          <!-- <el-row>
            <div class="common-div-card pagination">
              <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
              />
            </div>
          </el-row> -->
        </el-col>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { api } from '/@/api/VolumeDivisionOptimization/index';

  // 搜索表单数据
  const searchForm = reactive({
    startTime: '',
    endTime: '',
    coldCoilId: '',
    wtMisMatchFlag: '',
  });

  const tableLoading = ref(false);
  const tableRef = ref();

  // 表格数据
  const tableData = ref([]);

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchTableData();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchTableData();
  };

  // --- Pagination ---
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: tableData.value.length,
  });

  // 搜索方法
  const handleSearch = async () => {
    pagination.currentPage = 1;
    await fetchTableData();
  };

  // 重置方法
  const handleReset = async () => {
    searchForm.startTime = '';
    searchForm.endTime = '';
    pagination.currentPage = 1;
    await fetchTableData();
  };

  const fetchTableData = async () => {
    // 初始化数据
    try {
      tableLoading.value = true;
      const param = {
        pageIndex: pagination.currentPage,
        pageSize: pagination.pageSize,
        dbegin: searchForm.startTime, // 查询开始时间
        dend: searchForm.endTime, // 查询结束时间
        coldCoilId: searchForm.coldCoilId,
        wtMisMatchFlag: searchForm.wtMisMatchFlag, // 重量不符标识
      };
      api.page(param).then((res) => {
        if (res.data.status == 2000) {
          tableData.value = res.data.data.map((item: any) => {
            if (item.duration && typeof item.duration !== 'number') {
              throw new Error('停机时长数据类型错误');
            }
            const durationInMinutes = item.duration / 60;
            return {
              ...item,
              duration: Math.round(durationInMinutes * 100) / 100,
            };
          });
          pagination.total = res.data.count;
          ElNotification({
            title: 'Success',
            message: '数据获取成功',
            type: 'success',
          });
        } else {
          throw new Error('数据获取失败：' + res.data.message);
        }
      });
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    } finally {
      tableLoading.value = false;
    }
  };

  onMounted(() => {
    // fetchTableData();
  });

  onUnmounted(() => {});
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border:1px solid #dcdfe6;

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  .container {
    height: 100vh;
    width: 99vw;
    background-color: #fff;
    border-radius: @border-radius;
  }

  .header-serch {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    height: 10vh;
    margin-top: 1vh;
  }

  .header-form {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .table {
    width: 100%;
    height: 74vh;
    padding: 10px;

    .el-table {
      height: calc(74vh - 20px);
    }
  }

  .pagination {
    width: 100%;
    height: 6vh;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    margin-top: 1vh;
  }
</style>
